import 'package:flutter/material.dart';

/// 一个Material 风格的组件
/*• card：圆角，默认使用Card 主题颜色。
• canvas：矩形。
• circle：圆形，默认没有颜色，通常用于floating action button
• button：圆角，默认没有颜色，通常用于MaterialButton
• transparency：透明，使用水波纹和高亮颜色绘制。
animationDuration 表示动画之行时常，shape、elevation、shadowColor 属性发生
变化时使用此动画时常
*/

class MaterialDemo extends StatefulWidget {
  const MaterialDemo({Key? key}) : super(key: key);

  @override
  _MaterialDemoState createState() => _MaterialDemoState();
}

class _MaterialDemoState extends State<MaterialDemo> {
  double _radius = 0;
  Color _color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Material"),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Center(
            child: Column(
              children: [
                Material(
                  type: MaterialType.card,
                  color: Colors.red,
                  child: Container(
                    height: 100,
                    width: 100,
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                Material(
                  color: Colors.red,
                  elevation: 10,
                  shadowColor: Colors.blue,
                  child: Container(
                    width: 100,
                    height: 100,
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                Material(
                  borderRadius: BorderRadius.circular(14),
                  color: Colors.blue,
                  textStyle: TextStyle(fontSize: 20, color: Colors.red),
                  child: Container(
                    height: 100,
                    width: 100,
                    alignment: Alignment.center,
                    child: Text("美好生活"),
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                RaisedButton(
                  onPressed: () {
                    setState(() {
                      _radius = 30.0;
                      _color = Colors.red;
                    });
                  },
                  child: Text("执行动画"),
                ),
                Material(
                  borderRadius: BorderRadius.circular(_radius),
                  shadowColor: _color,
                  color: Colors.green,
                  animationDuration: Duration(seconds: 1),
                  child: Container(
                    width: 100,
                    height: 100,
                    alignment: Alignment.center,
                    child: Text("向往"),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
